<template>
    <div class="Basic">Button</div>
</template>
<script setup>

</script>
<style lang="less" scoped>
.Basic {
    width: 100px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    cursor: pointer;
    background: darkcyan;

    transform: scale(0.8) rotateZ(10deg);
    /*
    // 指定单个属性进行变幻时，可以有效提高 CSS 过渡的效率 
    */ 
    transition: transform 0.3s;
}

.Basic:hover {
    /*
    // transform 由于是聚合CSS 样式，并且浏览器没有对 transform 的子属性方法进行单个命名，
    // 所以在指定变换某一个树形的时候，需要将原变换属性进行替换，使 transform 只触发其中某一个方法
    // 这样才能对 transform 方法进行精准控制
    */
    transform: scale(0.8);
    background-color: bisque;
    color: #666;
}

.Basic:active {

    transform: scale(1);
    background-color: cornflowerblue;
    color: #fff;
}
</style>